<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>
        鼠标操作3D场景,进行操作旋转 缩放 位移 插入多个元素  
    </title>
    <style>
         body {
                margin: 0;
                overflow: hidden;
                /* 隐藏body窗口区域滚动条 */
         }
    </style>
</head>
<body>
    
</body>
</html>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script> -->
<script src="./1.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<script>
// 创建场景对象Scene
    var scene = new THREE.Scene();
    // 创建网格模型                                             //z y x
    var geometry = new THREE.SphereGeometry(60, 40, 40);    //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(300, 100, 20);        //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({             //即场景 颜色 
      color: 0xcc
    });          //材质对象Material
    var mesh = new THREE.Mesh(geometry, material);             //网格模型对象Mesh
    scene.add(mesh);                                           //网格模型添加到场景中
   
    var geometry2 = new THREE.SphereGeometry(60, 22, 4);       //创建多个 立体图形插入  
    var material2 = new THREE.MeshLambertMaterial({             //即场景 颜色 
      color: 0xff00ff,
      transparent:true,  //1 开启透明度
      opacity:.5,        //2 配置透明度 
      //   wireframe:true,    // 线条模式 线框 可以将材质渲染成线框，非常适用于调试。
      //   visible: false     // 定义该材质是否可见。如果设置为 false,那么在场景中就看不到该物体。
    });          //材质对象Material
    var mesh2 = new THREE.Mesh(geometry2, material2);           //网格模型对象Mesh
    scene.add(mesh2);  
    mesh2.translateY(120)                                       //沿着y轴平移120    == mesh.position.set(x, y, z);       
    
    var geometry3 = new THREE.ConeBufferGeometry( 50, 200, 32 );
    var material3 = new THREE.MeshBasicMaterial( {color: 0xffff00} );
    var cone = new THREE.Mesh( geometry3, material3 );
    scene.add(cone);   
    cone.translateY(220)

    // scene.background=new THREE.CubeTextureLoader().setPath('./1.jpg')
    //     .load(['./1.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg']);
    
    //光源设置
    //点光源
    var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300);                     //点光源位置
    scene.add(point);                                          //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)

//坐标辅助线 
    //红线是X轴，绿线是Y轴，蓝线是Z轴
    var axisHelper = new THREE.AxisHelper(250); //(number) xyz 长度
    scene.add(axisHelper)

//相机设置
    var width = window.innerWidth;                              //窗口宽度
    var height = window.innerHeight;                            //窗口高度
    var k = width / height;                                     //窗口宽高比
    var s = 200;                                                //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);   //这里走一个算法儿 
    camera.position.set(200, 300, 200);                         //设置相机位置   z y x即角度  
    camera.lookAt(scene.position);                              //设置相机方向(指向的场景对象)
    
   

//创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);                            //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1);                        //设置背景颜色
    document.body.appendChild(renderer.domElement);             //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    //renderer.render(scene, camera);                             //传入场景对象和照相机 render(scene场景,camera照相机)方法去解析两个传入的参数实例 绘制函数 

//渲染函数 
    //旋转 
    function render(){
        renderer.render(scene, camera);   //执行渲染操作函数 
        // mesh.rotateY(0.01);               //每次绕Y轴旋转0.01度  执行时改变场景 
        // mesh2.rotateX(0.01);
        // requestAnimationFrame(render)     //请求再次执行渲染函数render 渲染下一帧 每一帧循环下去       
    } 
    render()   
    //周期性函数 开定时器  
    // setInterval("render()", 20) 
    /*
    浏览器window对象 
    周期性函数 
       1.setInterval("render()", 20)     循环定时器,按照一定时间执行函数 
       2.setTimeout("",0)                倒计时多少s后,执行函数
       3.window.requestAnimationFrame()  请求浏览器执行下一帧动画 0
       
        间隔20ms周期性调用函数, 20ms也就是刷新频率是50fps(1s/20ms)  
        设置调用render函数的周期为200ms 刷新频率相当于5,明显的卡顿不流畅
    */    
    
//配置 实例化 函数 鼠标拖拽    
    var controls = new THREE.OrbitControls(camera);      //传入相机对象作为参数     
    // console.log('查看对象 ', controls )
    controls.addEventListener("change",render)

    // var e1 = {name:"dd",name2:"cdd"};
    // var e2 = {name:"aaa",name2:"bbb"};
    // function invite(c1,c2){
    //     console.log(c1+""+this.name+""+this.name2+""+c2)
    // }
    // invite.call(e1,"hello","你好");
    // invite.call(e2,"hello","你好");
    function loadImageAsync(url) {
        return new Promise(function(resolve, reject) {
            const image = new Image();
            image.onload = function() {
                resolve(image);
                console.log('11111111')
            };

            image.onerror = function() {
             reject(new Error('Could not load image at ' + url));
            };

            image.src = url;
        });
}

</script>